<template>
  <div 
    class="swiper-wrap"
    :style="{
      margin: '6px ' + swiperControl.pagePadding + 'px',
      borderRadius: swiperControl.imageBorder == 0 ? '0' : '6px',
      height: swiperControl.imgHeight + 'px'
    }"
  >
    <el-carousel class="swiper" :height="swiperControl.imgHeight + 'px'" 
      indicator-position="none"
      arrow="never"
      v-if="swiperControl.swiperStyle == 0"
      @change="swiperChange"
      
    >
      <el-carousel-item v-for="(item,index) in bannerList" :key="index">
        <img :src="item.file" alt="" :key="index">
      </el-carousel-item>
    </el-carousel>

    <swiper 
      :options="swiperOption" 
      ref="mySwiper" 
      class="swiper-wrap-style2"   
      v-if="swiperControl.swiperStyle == 1" 
      :style="{'height': swiperControl.imgHeight + 'px'}"
    >
      <!-- slides -->
      <swiper-slide class="swiper-no-swiping" v-for="(item,index) in bannerList" :key="index">
         <img :src="item.file" alt="" :key="index">
      </swiper-slide>
      
    </swiper>
    <!-- 指示器 -->
    <div class="indicator-wrap indicator-wrap-1" v-if="swiperControl.indicator == 1">
      <div 
        :class="{'line': true, active: index == currentIndex}" 
        v-for="(item,index) in bannerList" 
        :key="index"
      >
      </div>
    </div>
    <!-- 指示器2 -->
    <div class="indicator-wrap indicator-wrap-2" v-if="swiperControl.indicator == 2">
      <div 
        :class="{'line': true, active: index == currentIndex}" 
        v-for="(item,index) in bannerList" 
        :key="index"
      >
      </div>
    </div>
    <!-- 指示器3 -->
    <div class="indicator-wrap-3" v-if="swiperControl.indicator == 3">
      <span>{{currentIndex + 1}}/{{bannerList.length}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BannerSwiper',
  props:['bannerList','swiperControl'],
  data() {
    return {
      currentIndex: 0,
      swiperOption: {
        noSwiping : true,
        slidesPerView: 1.1,
        spaceBetween: 0,
        loop: false,
        speed: 800,
        centeredSlides: true,
        watchActiveIndex: true,
        observer: true,
        observeParents: true,
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // ...
      }
    }
  },
  computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
  mounted() {
    console.log(this.bannerList, 'bannerList')
    console.log('Current Swiper instance object', this.swiper)
  },
  methods: {
    swiperChange(newIndex) {
      this.currentIndex = newIndex;
    }

  },
}
</script>

<style lang="less" scoped>
  .swiper-wrap {
    background: #fff;
    // height: 131px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    box-shadow: 1px 1px 16px 0 #f1f1f1;
    .swiper {
      width: 100%;
      height: 100%;
      .el-carousel__item{
        width: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      
    }
    .indicator-wrap {
      position: absolute;
      bottom: 9px;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      left: 50%;
      transform: translateX(-50%);
      z-index: 200;
      &.indicator-wrap-1 {
        .line {
          opacity: .3;
          border-radius: 100px;
          width: 6px;
          height: 6px;
          transition: opacity .2s;
          background-color: #ebedf0;
          &:not(:last-child) {
            margin-right: 6px;
          }
          &.active {
            opacity: 1;
            background-color: #1989fa;
          }
        }
      }
      &.indicator-wrap-2 {
        .line {
          width: 12px;
          height: 2px;
          background-color: #c5c5c5;
          &:not(:last-child) {
            margin-right: 2px;
          }
          &.active {
            background-color: #000;
          }
        }
        

      }
      
      
    }
    .indicator-wrap-3 {
      position: absolute;
      bottom: 9px;
      right: 15px;
      z-index: 200;
      display: inline-block;
      min-width: 18px;
      height: 18px;
      line-height: 18px;
      padding: 0 5px;
      border-radius: 100px;
      font-size: 12px;
      background: #000;
      opacity: .3;
      color: #fff;

    }
    .indicator-wrap-4 {
      bottom: 0;
    }
  }

  // swiper
  .swiper-wrap-style2 {
    height: 131px;
  }
  .swiper-wrap-style2 img {
    height: 100%;
    width: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
	  transition: 300ms;
	  transform: scale(0.94);
  }
  .swiper-slide-active,.swiper-slide-duplicate-active{
    transform: scale(1);
    border-radius: 6px;
    overflow: hidden;
	}
</style>